/**
 * @author Created by qiush on 2017-05-31.
 */

import * as React from 'react';

import AbsAttrRenderer from './AbsAttrRenderer';

class AbsSimpleAttrRenderer<S> extends AbsAttrRenderer<S> {

  render(): JSX.Element | null {
    const {attribute} = this.props;

    return (
      <div key={attribute.name} className="Attribute-item">
        <div className="Attribute-item-title" title={attribute.display}>
          {this.renderCollapseIcon()}
          <span>{attribute.display}</span>
        </div>
        <div className="Attribute-item-content">{this.renderContent()}</div>
      </div>
    );
  }

  protected renderContent(): JSX.Element | null {
    return null;
  }

  protected getAttrVal(): any {
    const {attribute, selectedView, target} = this.props;
    return (selectedView[target] || {})[attribute.name] || '';
  }

  protected changeHandler = (event: React.ChangeEvent<any>) => {
    const newValue = event.target.value;
    this.notifyViewChanged(newValue);
  }

  private renderCollapseIcon(): JSX.Element | null {
    const {collapsible, toggleCollapse} = this.props;

    if (collapsible) {
      return (
        <span className="fa fa-caret-down" onClick={toggleCollapse}/>
      );
    }
    return <span className="fa"/>;
  }
}

export default AbsSimpleAttrRenderer;
